//管理员管理
<template>
	<div>
		<!-- 添加 -->
		<div class="right margin-bottom">
			<div class="searchArea flex">
				<el-form ref="serachForm" :model="searchForm" :inline="true">
					<el-form-item prop="account">
						<el-input v-model="searchForm.account" placeholder="账号">
						</el-input>
					</el-form-item>
					<el-form-item prop="mobile">
						<el-input v-model="searchForm.mobile" placeholder="手机号">
						</el-input>
					</el-form-item>
					<el-form-item prop="userType">
						<el-select v-model="searchForm.userType" placeholder="请选择类别">
	            <el-option label="个人用户" value="1"></el-option>
	            <el-option label="企业用户" value="2"></el-option>
	          </el-select>
						<!-- </el-input> -->
					</el-form-item>
					<el-form-item prop="action">
						<el-button size="medium" type="primary" @click='getLogsList'>搜索</el-button>
					</el-form-item>
					<!--<el-form-item prop="action">
						<el-button size="medium" type="primary" icon="el-icon-plus" @click="addPopup=true">添加用户</el-button>
					</el-form-item>-->
				</el-form>
			</div>
		</div>
		<!-- 列表 -->
		<el-table :data="dataList" v-loading="loading" :row-class-name="tableState" border height="700" style="margin-top:15px">

			<el-table-column prop="account" label="账号" align="center">
			</el-table-column>

			<el-table-column prop="real_name" label="姓名" align="center">
			</el-table-column>

			<!--<el-table-column prop="pwd" label="密码" align="center">
			</el-table-column>-->

			<el-table-column prop="phone" label="手机号" align="center">
			</el-table-column>

			<el-table-column prop="profession" label="职业" align="center">
			</el-table-column>

			<el-table-column prop="is_vip" label="类别" align="center">
			</el-table-column>

			<el-table-column prop="is_auth" label="状态" align="center">
			</el-table-column>

			<el-table-column prop="op" label="操作" fixed="right" width="150" align="center">
				<template slot-scope="scope">
					<!--<el-button size="mini" type="primary" @click="openAudit(scope.row)">审批</el-button>-->
					<el-button size="mini" type="primary" @click="openDetail(scope.row)">查看详情</el-button>
					<!--<el-button size="mini" type="primary" icon="el-icon-edit" @click="updateOpen(scope.row)"></el-button>
					<el-button size="mini" type="danger" icon="el-icon-delete" @click="updateDelete(scope.row)"></el-button>-->
				</template>
			</el-table-column>
		</el-table>
		<!-- 分页 -->
		<div class="page-box" style="text-align: center;">
			<el-pagination :total="Total" :current-page="CurrentPage" :page-size="PageSize" @size-change="SizeChange" @current-change="CurrentChange" :page-sizes="$pages" layout="total, sizes, prev, pager, next, jumper">
			</el-pagination>
		</div>
		<!-- 修改用户 -->
		<el-dialog title="修改用户信息" :visible.sync="updatePopup" :close-on-click-modal="false" :close-on-press-escape="false" width="30%" style="text-align: center;">
			<el-form :model="updateForm" label-position="left" label-width="80px">
				<el-form-item label="账号" prop="account">
					<el-input v-model="updateForm.account" clearable auto-complete="off" :disabled="true"></el-input>
				</el-form-item>
				<el-form-item label="姓名" prop="real_name">
					<el-input v-model="updateForm.real_name" clearable auto-complete="off"></el-input>
				</el-form-item>
				<el-form-item label="手机号" prop="phone">
					<el-input v-model="updateForm.phone" clearable auto-complete="off" :disabled="true"></el-input>
				</el-form-item>
				<el-form-item label="公司id" prop="account">
					<el-input v-model="updateForm.account" clearable auto-complete="off" :disabled="true"></el-input>
				</el-form-item>
				<el-form-item label="公司姓名" prop="account">
					<el-input v-model="updateForm.account" clearable auto-complete="off" :disabled="true"></el-input>
				</el-form-item>
				<el-form-item label="类别" prop="is_vip">
					<el-input v-model="updateForm.status" clearable auto-complete="off" :disabled="true"></el-input>
				</el-form-item>
				<el-form-item label="密码" prop="pwd">
					<el-input v-model="updateForm.pwd" clearable auto-complete="off" :disabled="true"></el-input>
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click="updatePopup = false">取 消</el-button>
				<el-button type="primary" @click="updateManage(updateForm)" :loading="updateLoading">确 定</el-button>
			</div>
		</el-dialog>
		<!-- 查看详情 -->
		<el-dialog title="查看用户信息" :visible.sync="Detail" :close-on-click-modal="false" :close-on-press-escape="false" width="30%" style="text-align: center;">
			<el-form :model="updateInfo" label-position="left" label-width="80px">
				<el-form-item label="账号" prop="account" align="left">
					{{updateInfo.account}}
				</el-form-item>
				<el-form-item label="姓名" prop="real_name" align="left">
					{{updateInfo.real_name}}
				</el-form-item>
				<el-form-item label="手机号" prop="phone" align="left">
					{{updateInfo.phone}}
				</el-form-item>
				<el-form-item label="公司id" prop="account" align="left">
					{{updateInfo.account}}
				</el-form-item>
				<el-form-item label="公司姓名" prop="account" align="left">
					{{updateInfo.realName}}
				</el-form-item>
				<el-form-item label="类别" prop="is_vip" align="left">
					{{updateInfo.is_vip}}
				</el-form-item>
				<!--<el-form-item label="密码" prop="pwd" align="left">
					{{updateInfo.pwd}}
				</el-form-item>-->
			</el-form>
		</el-dialog>
		<!-- 审批 -->
		<el-dialog title="审批用户信息" :visible.sync="Audit" :close-on-click-modal="false" :close-on-press-escape="false" width="30%" style="text-align: center;">
			<el-form :model="updateAudit" label-position="left" label-width="80px">
				<el-form-item label="类别" prop="is_vip" align="left">
					{{updateAudit.is_vip}}
				</el-form-item>
				<el-form-item label="账号" prop="account" align="left">
					{{updateAudit.account}}
				</el-form-item>
				<el-form-item label="手机号" prop="phone" align="left">
					{{updateAudit.phone}}
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer" v-if="updateAudit.is_auth=='2'">
				<el-button type='info' :disabled="true">已审批</el-button>
			</div>
			<div slot="footer" class="dialog-footer"  v-else> 
				<el-button type="primary" @click="updateYes(updateAudit.uid)">审批通过</el-button>
				<el-button type='danger' @click="updateNo(updateAudit.uid)" :loading="updateLoading">审批不通过</el-button>
			</div>
		</el-dialog>

	</div>
</template>

<script>
	import {
		LISTSHOPUSER,
		AUTHSHOPUSER,
		DELETESHOPUSER,
		UPDATESHOPUSER,
	} from '@/utils/api';
	import { formatDate } from '@/utils/validate.js';
	export default {
		data() {
			return {
				searchForm: {
					account: "",
					mobile: "",
					userType: "",
				},
				// 分页
				CurrentPage: 1,
				PageSize: 10,
				Total: 0,

				// 查询
				loading: false,
				dataList: [],

				// 修改
				updatePopup: false,
				updateLoading: false,
				updateForm: {
					id: '',
					account: '',
					realName: '',
					mobile: ''
				},
				//查看详情
				Detail: false,
				updateInfo: {
					id: '',
					account: '',
					realName: '',
					mobile: ''
				},
				//审批
				Audit:false,
				updateAudit: {
					id: '',
					account: '',
					realName: '',
					mobile: ''
				},
			}
		},
		filters: {
			formatDate(time) {
				var date = new Date(time * 1000);
				return formatDate(date, 'yyyy-MM-dd hh:mm:ss');
			}
		},
		created() {
			this.getManage()
		},
		methods: {
			getLogsList() {
				LISTSHOPUSER({
					account: this.searchForm.account,
					mobile: this.searchForm.mobile,
					userType: this.searchForm.userType,
					pageNum: this.CurrentPage,
					pageSize: this.PageSize,
				}).then(res => {
					console.log(res.data,'shop')
					this.loading = false
					this.dataList = res.data
					this.Total = res.data.count
					for(let i in this.dataList){
						if(this.dataList[i].is_vip = 1){
							this.dataList[i].is_vip = '人个用户'
						}else if (this.dataList[i].is_vip = 2){
							this.dataList[i].is_vip = '企业用户'
						}
						if(this.dataList[i].is_auth = 1){
							this.dataList[i].is_auth = '审核 中'
						}else if (this.dataList[i].is_auth = 2){
							this.dataList[i].is_auth = '已审核'
						}else if (this.dataList[i].is_auth = 3){
							this.dataList[i].is_auth = '审核不通过'
						}
					}
				})
			},
			// 状态
			tableState({
				row
			}) {
				if(row.locked === true) {
					return 'danger-row'
				} else if(row.locked === false) {
					return 'success-row'
				}
				return ''
			},
			// 查询管理员
			getManage() {
				this.loading = true
				LISTSHOPUSER({
					pageNum: this.CurrentPage,
					pageSize: this.PageSize
				}).then(res => {
					console.log(res,'shop')
					this.loading = false
					this.dataList = res.data
					this.Total = res.data.count
					for(let i in this.dataList){
						if(this.dataList[i].is_vip == 1){
							this.dataList[i].is_vip = '人个用户'
						}else if (this.dataList[i].is_vip == 2){
							this.dataList[i].is_vip = '企业用户'
						}
						if(this.dataList[i].is_auth == 1){
							this.dataList[i].is_auth = '审核中'
						}else if (this.dataList[i].is_auth == 2){
							this.dataList[i].is_auth = '已审核'
						}else if (this.dataList[i].is_auth == 3){
							this.dataList[i].is_auth = '审核不通过'
						}
					}
				})
			},
			// 分页（当前页）
			CurrentChange(val) {
				this.CurrentPage = val
				this.getManage()
			},
			// 分页（每页条数）
			SizeChange(val) {
				this.PageSize = val
				this.getManage()
			},
			// (启动弹窗)删除
			updateDelete(_scope) {
				this.$confirm('此操作将删除该用户, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          DELETESHOPUSER({
						id: _scope.uid,
					}).then(res => {
						this.getManage()
					})
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });          
        });
			},
			openAudit(_scope) {
				this.Audit = true
				this.updateAudit = _scope
			},
			updateYes(id){
				AUTHSHOPUSER({
					id: id,
					result: 2
				}).then(res => {
					this.Audit = false
					this.getManage()
				})
			},
			updateNo(id){
				AUTHSHOPUSER({
					id: id,
					result: 3
				}).then(res => {
					this.Audit = false
					this.getManage()
				})
				
			},
			// (启动弹窗)查看详情
			openDetail(_scope) {
				this.Detail = true
				this.updateInfo = _scope
			},
			// (启动弹窗)修改用户
			updateOpen(_scope) {
				this.updatePopup = true
				this.updateForm = _scope
			},
			// 修改用户信息
			updateManage(e) {
				this.updateLoading = true
				UPDATESHOPUSER({
					id: e.uid,
					name: e.real_name
				}).then(res => {
					this.updateLoading = false
					this.$message.success('修改成功')
					this.updatePopup = false
					this.getManage()
				})
			},
		}
	}
</script>
<style scoped>
	.searchArea {
		width: 100%;
		margin-top: 15px;
		justify-content: flex-start;
	}
	.dialog-footer{
		text-align: center;
	}
</style>